
<template>
    <view>
        <customer-head :customer="customerHeader"/>
        <view class="line-division"/>
        <view class="flex tabList">
            <view v-for="(item,index) in tabList"
                  class="tabItem fl1 flex a-item j-content"
                  :class="{select_tabItem:tabIndex === index}"
                  @tap="setIndex(index)"
            >{{ item }}</view>
        </view>
        <view class="line-division"/>
        <view v-if="tabIndex === 1" class="putList flex wrap">
          <put-goods v-for="item in dataList" :style="{minHeight:putHeight}" :goods="item" style="margin-bottom: 12rpx"/>
        </view>
        <report v-else  :decimal="2" :propList="reportPropList[tabIndex]" :dataList="dataList"/>
    </view>
</template>

<script >
import customerHead from "@/order/components/customerHead.vue";
import {customerTraceOrders, customerTracePhoto, getDebtList, onSaleDetail} from "@/service/api/shoprecord";
import report from "@/components/report.vue";
import putGoods from "@/order/components/putGoods.vue";

export default {
    name:'visitRecord',
    components:{customerHead,report,putGoods},
    data(){
      return{
          customerHeader:{},
          tabIndex:0,
          putHeight:0,
          tabList:['在售品相','陈列记录','历史订单','欠款详情'],
          customerVisitRecordId:0,
          reportPropList:[
              [
                  {prop:'goodsName',label:'商品名称',width: '300'},
                  {prop:'model',label:'规格',width: '300'},
                  {prop:'barcode',label:'条形码',width: '300'},
              ],
              [],
              [
                  {prop:'orderCode',label:'单据编码',width: '250',fontSize:'23'},
                  {prop:'goodsName',label:'商品名称',width: '250',fontSize:'23'},
                  {prop:'acceptGoodsCount',label:'数量',width: '100',fontSize:'23'},
                  {prop:'taxPrice',label:'单价',width: '100',fontSize:'23'},
                  {prop:'acceptTaxAmount',label:'金额',width: '100',fontSize:'23',formart:function (e){
                            return e.toFixed(2)
                      }},
              ],
              [
                  {prop:'busDate',label:'业务日期',width: '300'},
                  {prop:'orderCode',label:'单据号',width: '300'},
                  {prop:'unCancelAmount',label:'欠款金额',width: '300'},
              ],
          ],
          query:[
              onSaleDetail,
              customerTracePhoto,
              customerTraceOrders,
              getDebtList
          ],
          dataList:[]
      }
    },
    onLoad(query) {
        this.customerHeader = JSON.parse(query.customerHeader)
        this.customerVisitRecordId = query.customerVisitRecordId
        this.busDate = query.busDate
        this.getSaleDetail()
    },
    methods:{
      setIndex(index){
          if (index === 4){
              const date = this.busDate.split('-')
              const params = {
                  customerId:this.customerHeader.customerId,
                  year:date[0],
                  month:date[1],
                  day:date[2],
                  userId:''
              }
                uni.navigateTo({
                    url:'/order/path/index'
                })
              return
          }
          this.tabIndex = index
          this.dataList = []
          this.getSaleDetail()
      },
      getSaleDetail(){
          let data;
          if (this.tabIndex === 2 || this.tabIndex === 3){
              data = {customerId:this.customerHeader.customerId,size:999}
          }else {
              data = {customerVisitRecordId:this.customerVisitRecordId,size:999}
          }

          this.query[this.tabIndex](data).then(res=>{
              if (res.status === 200){
                  this.dataList= res.data.content
              }else {
                  this.dataList= []
              }
          }).catch(err=>this.dataList= [])
      },
    }
}
</script>



<style scoped lang="scss">
.tabList{
  .tabItem{
    height: 80rpx;
  }
  .select_tabItem{
    background: #00A4FE;
    color: #f8f8f8;
  }
}
.putList{
    padding: 10rpx;
    justify-content: space-between;
}
</style>